<template>
  <div ref="containerRef" class="common-page edit">
    <div class="common-scrollbar form-wrap full">
      <t-form ref="formRef" :rules="FORM_RULES" :data="formData" :colon="true" :label-width="100" label-align="left">
        <title-view title="在册信息" icon="item-info"></title-view>
        <div class="common-item-view">
          <t-row :gutter="[0, 20]">
            <t-col v-for="(item, index) in list" :key="index" :span="6">
              <div class="item">
                <form-item :form-data="formData" :data="item">
                  <template #self_name>
                    <t-input></t-input>
                  </template>
                </form-item>
              </div>
            </t-col>
          </t-row>
        </div>
      </t-form>
    </div>

    <div class="common-footer">
      <t-button theme="default" variant="outline" @click="handleCancel">取消</t-button>
      <t-button theme="primary" @click="handelSubmit">确定</t-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import _ from 'lodash';
import { tryit } from 'radash';
import { FormInstanceFunctions, MessagePlugin } from 'tdesign-vue-next';
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';

import mockApi from '@/api/mock';
import { PostData, ResultItem } from '@/api/model/mockModel';
import { SUCCESS_CODE } from '@/constants';
import { useLoading } from '@/hooks/useLoading';

import { FORM_RULES, INIT_DATA, list as INIT_FORM_LIST } from './datas/edit';

const route = useRoute();
const router = useRouter();

const containerRef = ref<HTMLDivElement>();
const list = ref(_.cloneDeep(INIT_FORM_LIST));
const formData = ref({ ...INIT_DATA });
const detailData = ref<ResultItem>();
const formRef = ref<FormInstanceFunctions>();

const { loadingStart, loadingEnd } = useLoading(containerRef);

// 设置数据
const setData = (data: ResultItem) => {
  detailData.value = _.cloneDeep(data);
  const changeData: any = {
    ga1400: true,
    name: 'asd',
    address: { code: '210304', address: 'dwadadawdad', codeLabel: '立山区' },
    ip: '192.168.101.100',
    time: [],
    date: '2024-04-18 12:00:00',
  };
  formData.value = { ...data, ...changeData };
};

const getData = async () => {
  const id = route.query.id as string;
  if (!id) return;
  loadingStart();
  const [err, res] = await tryit(mockApi.info)({ id });
  if (!err && res.code === SUCCESS_CODE) setData(res.data);
  loadingEnd();
};

const handleCancel = () => {
  router.go(-1);
};

const handelSubmit = async () => {
  const validateRes = await formRef.value.validate();

  if (validateRes === true) {
    loadingStart();

    const postData: PostData = { ...formData.value };
    const id = detailData.value?.id;
    const api = id ? mockApi.update : mockApi.create;

    if (id) postData.id = id;

    const [err, res] = await tryit(api)(postData);

    if (!err && res.code === SUCCESS_CODE) {
      await MessagePlugin.success('操作成功');
      handleCancel();
    }

    loadingEnd();
  }
};

onMounted(() => {
  getData();
});
</script>

<style lang="less" scoped></style>
